<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Update Chart Series</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Update Chart Series</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}
.fields label {
    font-weight:bold;
    display:block;
    float:left;
    width:8em;
}

.fields {
    border-top:1px solid #aaa;
    padding:10px;
}
</style>
<div class="intro">
<p>This example shows how to access a <code>Chart</code> instance's <code>seriesCollection</code> after the <code>Chart</code> has rendered.</p>
</div>
<div class="example">
<div id="mychart"></div>
<div class="fields">
    <p>
        <label for="seriesSelector">series:</label>
        <select name="seriesSelector" id="seriesSelector">
            <option value="expenses">expenses</option>
            <option value="revenue">revenue</option>
        </select>
    </p>
    <p>
        <label for="fillColor">fill color:</label>
        <input type="text" name="fillColor" id="fillColor" />
    </p>
    <p>
        <label for="borderColor">border color:</label>
        <input type="text" name="borderColor" id="borderColor" />
    </p>
    <p>
        <label for="borderWeight">border weight:</label>
        <input type="text" name="borderColor" id="borderWeight" />
    </p>
    <p>
        <button type="button" class="action" id="updateSeries">Update Series</button>
    </p>
</div>
<script type="text/javascript">
(function() {
    YUI().use('escape', 'charts', function (Y) 
    { 
        var myDataValues = [ 
            {category:"Q1", expenses:137000, revenue:532200}, 
            {category:"Q2", expenses:211000, revenue:689100}, 
            {category:"Q3", expenses:151000, revenue:521500}, 
            {category:"Q4", expenses:163000, revenue:892650}
        ];
        
        var mychart = new Y.Chart({type:"bar", dataProvider:myDataValues, render:"#mychart"});
        
        //Click handler
        Y.on("click", function(e) {
            var seriesName = Y.one("#seriesSelector").get("value"),
                fillColor = Y.Escape.html(Y.one("#fillColor").get("value")),
                borderColor = Y.Escape.html(Y.one("#borderColor").get("value")),
                borderWeight = parseFloat(Y.one("#borderWeight").get("value")),
                series,
                marker = {fill:{}, border:{}};
            if(seriesName)
            {
                series = mychart.getSeries(seriesName);
                if(fillColor)
                {
                    marker.fill.color = fillColor;
                }
                if(borderColor)
                {
                    marker.border.color = borderColor;
                }
                if(!isNaN(borderWeight))
                {
                    marker.border.weight = borderWeight;
                }
                series.set("styles", {marker:marker});
            }
       }, "#updateSeries");
    });
})();
</script>

</div>
<h3>Update Series of a <code>Chart</code> Instance After It has Rendered.</h3>


<p>You can update a series after the <code>Chart</code> has rendered through the <code>getSeries</code> method. This method returns a reference to a series instance based on either the
instance's <code>seriesCollection</code> index or the key value associated with the value data of the series. This example uses the value key of each series to update the fill color, 
border color and border weight of its markers.</p>

<pre class="code prettyprint">YUI().use(&#x27;charts&#x27;, function (Y) 
{ 
    var myDataValues = [ 
        {category:&quot;Q1&quot;, expenses:137000, revenue:532200}, 
        {category:&quot;Q2&quot;, expenses:211000, revenue:689100}, 
        {category:&quot;Q3&quot;, expenses:151000, revenue:521500}, 
        {category:&quot;Q4&quot;, expenses:163000, revenue:892650}
    ];
    
    var mychart = new Y.Chart({type:&quot;bar&quot;, dataProvider:myDataValues, render:&quot;#mychart&quot;});
    
    &#x2F;&#x2F;Click handler
    Y.on(&quot;click&quot;, function(e) {
        var seriesName = Y.one(&quot;#seriesSelector&quot;).get(&quot;value&quot;),
            fillColor = Y.Escape.html(Y.one(&quot;#fillColor&quot;).get(&quot;value&quot;)),
            borderColor = Y.Escape.html(Y.one(&quot;#borderColor&quot;).get(&quot;value&quot;)),
            borderWeight = parseFloat(Y.one(&quot;#borderWeight&quot;).get(&quot;value&quot;)),
            series,
            marker = {fill:{}, border:{}};
        if(seriesName)
        {
            series = mychart.getSeries(seriesName);
            if(fillColor)
            {
                marker.fill.color = fillColor;
            }
            if(borderColor)
            {
                marker.border.color = borderColor;
            }
            if(!isNaN(borderWeight))
            {
                marker.border.weight = borderWeight;
            }
            series.set(&quot;styles&quot;, {marker:marker});
        }
   }, &quot;#updateSeries&quot;);
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Shows how to use Charts to create a basic chart.">
                                        <a href="charts-simple.html">Basic Charts Implementation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with multiple series.">
                                        <a href="charts-multiseries.html">Chart with Multiple Series</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a column chart with multiple series.">
                                        <a href="charts-column.html">Specify Chart Type</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a column chart with a stacked numeric axis.">
                                        <a href="charts-stackedcolumn.html">Create Stacked Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with a time axis.">
                                        <a href="charts-timeaxis.html">Create a Chart with a Time Axis</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to add gridlines to a chart.">
                                        <a href="charts-gridlines.html">Add Gridlines to a Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with planar based events.">
                                        <a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use a chart&#x27;s styles attribute to customize a chart.">
                                        <a href="charts-globalstyles.html">Customize a Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to customize the default tooltip of a chart.">
                                        <a href="charts-customizedtooltip.html">Customize a Chart&#x27;s Tooltip</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to explicitly define the axes and series for a chart.">
                                        <a href="charts-objectstyles.html">Define a Chart&#x27;s Axes and Series</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use charts to create a pie chart.">
                                        <a href="charts-pie.html">Pie Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with multiple value axes.">
                                        <a href="charts-dualaxes.html">Dual Axes Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to access a chart instance&#x27;s value axis after the chart has rendered.">
                                        <a href="charts-axisupdate.html">Update Chart Axis</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to access a chart instance&#x27;s seriesCollection after the chart has rendered.">
                                        <a href="charts-seriesupdate.html">Update Chart Series</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
